<template>
    <div class="register-wrap">
    
        <div class="head">
            <div @click="replace('/')" class="logo" :style="{backgroundImage: 'url(' +configObj.logo+ ')'}"></div>
        </div>
   
        <div class="step-wrap">
            <el-steps :active="active" finish-status="success" align-center>
                <el-step title="账户信息填写"></el-step>
                <el-step title="公司信息"></el-step>
                <el-step title="保密协议"></el-step>
                <el-step title="注册成功"></el-step>
            </el-steps>
        </div>  
        <div class="regist-content" v-if="active == 0">
            <el-form :model="information" :rules="rules" ref="information" label-width="200px">
                <el-form-item prop="userType">
                    <div class="content-list type">
                        <div class="name">账户类型：</div>
                        <el-select v-model="information.userType" placeholder="请选择">
                            <el-option
                            v-for="item in userTypeArr"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </el-form-item>
                <el-form-item prop="mobile">
                    <div class="content-list">
                        <div class="name">手机号码：</div>
                        <el-input
                        v-model="information.mobile"
                        clearable>
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item prop="code">
                    <div class="content-list">
                        <div class="name">短信验证码：</div>
                        <el-input
                        @focus="codeChange"
                        v-model="information.code"
                        clearable>
                        </el-input>
                        <div @click="getCode" class="send-btn">{{codeMsg}}</div>
                    </div>
                    <div v-if="noCode" class="el-form-item__error">
                        验证码不对或已过期
                    </div>
                </el-form-item>
                <el-form-item prop="password">
                    <div class="content-list">
                        <div class="name">密码：</div>
                        <el-input
                        type="password"
                        v-model="information.password"
                        clearable>
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item prop="confirmPassword">
                    <div class="content-list">
                        <div class="name">重复密码：</div>
                        <el-input
                        type="password"
                        v-model="information.confirmPassword"
                        clearable>
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item v-if="information.userType == 'company'&&configObj.organzationShow" prop="parentChannelCode">
                    <div class="content-list">
                        <div class="name">推荐机构码(选填)：</div>
                        <el-input
                        v-model="information.parentChannelCode"
                        clearable>
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item>
                    <div @click="submitForm('information')" class="next-btn">下一步</div>
                </el-form-item>
            </el-form>    
        </div>
        <div class="regist-content" v-if="active == 1">
            <el-form :model="information1" :rules="rules" ref="information1" label-width="200px">
                <el-form-item prop="companyName">
                    <div class="content-list">
                        <div class="name">公司名称(全称):</div>
                        <el-input
                         @focus="companyChange"
                        v-model="information1.companyName"
                        clearable>
                        </el-input>
                        <div @click="checkCommpany('information1')" class="send-btn">企业名称校验</div>
                    </div>
                    <div v-if="noResult" class="el-form-item__error">
                        公司名称查询无结果
                    </div>
                </el-form-item>
                <!-- <el-form-item prop="firstIndustry">
                    <div class="content-list address">
                        <div class="name">所属行业：</div>
                        <el-select filterable  width="10" @change="firstChange" v-model="information1.firstIndustry" placeholder="请选择">
                            <el-option
                            v-for="item in industryArr"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key">
                            </el-option>
                        </el-select>
                        <el-select filterable  width="10" @change="secondChange" v-model="information1.secondIndustry" placeholder="请选择">
                            <el-option
                            v-for="item in secondArr"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key">
                            </el-option>
                        </el-select>
                        <el-select filterable  width="10"  v-model="information1.thirdIndustry" placeholder="请选择">
                            <el-option
                            v-for="item in thirdArr"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key">
                            </el-option>
                        </el-select>
                    </div>
                </el-form-item> -->
                <el-form-item prop="regdate">
                    <div class="content-list">
                        <div class="name">注册成立日期：</div>
                        <el-date-picker
                            v-model="information1.regdate"
                            type="date"
                            placeholder="选择日期"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd">
                            </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item prop="regDistrictCode">
                    <div class="content-list address">
                        <div class="name">注册所在地：</div>
                        <el-select filterable @change="provinceChange" width="10" v-model="information1.regProvinceCode" placeholder="请选择">
                            <el-option
                            v-for="item in addressArr"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key">
                            </el-option>
                        </el-select>
                        <el-select filterable @change="cityChange"  width="10" v-model="information1.regCityCode" placeholder="请选择">
                            <el-option
                            v-for="item in cityArr"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key">
                            </el-option>
                        </el-select>
                        <el-select filterable  width="10" v-model="information1.regDistrictCode" placeholder="请选择">
                            <el-option
                            v-for="item in districtArr"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key">
                            </el-option>
                        </el-select>
                    </div>
                </el-form-item>
                <el-form-item prop="contactTrueName">
                    <div class="content-list">
                        <div class="name">联系人姓名：</div>
                        <el-input
                        v-model="information1.contactTrueName"
                        clearable>
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item prop="contactPosition">
                    <div class="content-list">
                        <div class="name">联系人职位：</div>
                        <el-input
                        v-model="information1.contactPosition"
                        clearable>
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item prop="contactPhone">
                    <div class="content-list">
                        <div class="name">联系电话：</div>
                        <el-input
                        v-model="information1.contactPhone"
                        clearable>
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item prop="contactEmail">
                    <div class="content-list">
                        <div class="name">邮箱：</div>
                        <el-input
                        v-model="information1.contactEmail"
                        clearable>
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item>
                    <div @click="()=>{this.active = 0}" class="next-btn next1">上一步</div>
                    <div @click="next2('information1')" class="next-btn">下一步</div>
                </el-form-item>
            </el-form>    
        </div>
        <div class="regist-content" v-if="active == 2">
            <div class="text-wrap">
                <h2 class="title">保密承诺函</h2> 
                <p class="company">致<input :value="information1.companyName" type="text" size="25">：</p>
                <p  v-if="configObj.name != '信用园区'" class="desc">鉴于贵公司进行债权或股权融资的需要，{{companyName=='创巢'?'上海创巢投资管理有限公司':'水楼台小微企业服务平台及指定的第三方系统运营机构 '}}（以下简称为“{{companyName}}”）作为信息的接收方已经接触或有可能接触贵公司（披露方）的保密信息，谨遵循以下原则：</p>
                <p  v-if="configObj.name == '信用园区'" class="desc">鉴于贵公司进行债权或股权融资的需要，信用园区金融服务平台（以下简称为“{{companyName}}”）作为信息的接收方已经接触或有可能接触贵公司（披露方）的保密信息，谨遵循以下原则：</p>
                <h3>一、需要保密的信息</h3>
                <p class="text">披露方以书面、口头或电子等任何形式提供给{{companyName}}涉及的客户信息、业务信息、业务系统有关的任何资料及其他各类数据、信息等的信息资料。
                </p>
                <h3>二、使用限制及范围</h3>
                <p class="text">{{companyName}}承诺只在披露方授权使用和限定的范围内使用保密信息，包括<br>
                （1）仅把所接收到的本协议指定的保密信息在项目领域使用，不移做他用；<br>
                （2）应采取尽可能对所有来自于对方的信息严格保密，包括执行有效地安  
                    全措施和操作规程；<br>
                （3）保证保密信息仅可在从事该项目研究的负责人和雇员范围内告知；<br>
                （4）不能透露涉及商业使用权、专利权、复制权、商标、技术机密、商业
                    机密或其他归对方专有的权利。</p>
                <h3>三、其他</h3>
                <p class="text">1、本承诺函中的“保密信息”不包括：<br>
                （1）非{{companyName}}单方错误导致的信息公开；<br>
                （2）在发布之前他方已知道的消息；<br>
                （3）由披露方在对信息发布没有限制的情况下公开的信息；<br>
                2、如果{{companyName}}违反承诺，披露方有权要求公平的补救措施。<br>
                3、本承诺函自{{companyName}}盖章之日起生效。</p>
                <p>特此承诺。</p>
                <p v-if="configObj.name != '信用园区'" class="date">承诺人：{{companyName=='创巢'?'上海创巢投资管理有限公司':configObj.name+'小微企业服务平台及指定的第三方系统运营机构 '}}  </p>
                <p v-if="configObj.name == '信用园区'" class="date">承诺人：信用园区金融服务平台  </p>
                <p class="date">日期： {{dateStr}}</p>
            </div>
            <div class="text-read">
               <el-checkbox v-model="checked">我已阅读并同意上述保密协议</el-checkbox>
               <!-- <div class="print">打印保密协议</div> -->
            </div>
            <div @click="()=>{this.active = 1}" class="next-btn next1">上一步</div>
            <div @click="next3" class="next-btn">下一步</div>
        </div>
        <div class="regist-content" v-if="active == 3">
            <div class="tip-wrap">
                <p>恭喜你！已完成注册流程，部分功能将在工作人员审核完成后启用。</p>
                <p>请您完成初审认证，完成初审认证后将能帮助我们更好地为您匹配合适的贷款产品！</p>
            </div>
            <div @click="nextCert" class="next-btn finish">完成并进入初审认证</div>
        </div>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js'),
    common = require('../../common.js'),
    config = require('../../config/config.js')
export default {
    data() {
        return {
            configObj:'',
            companyName:'创巢',
            active:0,
            checked:false,
            codeMsg:'获取短信验证码',
            noResult:false,
            dateStr:'',
            noCode:false,
            seconds:60,
            userTypeArr:[
                {   
                    label:'企业',
                    value:'company'
                },
                {   
                    label:'资方',
                    value:'bank'
                },
                {   
                    label:'推荐机构',
                    value:'channel'
                },

            ],
            information: {
                userType:'',
                mobile:'',
                code:'',
                password:'',
                confirmPassword:'',
                parentChannelCode:''
            },
            information1: {
                companyName:'',
                firstIndustry:'',
                secondIndustry:'',
                regdate:'',
                regProvinceCode:'',
                regCityCode:'',
                regDistrictCode:'',
                contactTrueName:'',
                contactPosition:'',
                contactPhone:'',
                contactEmail:'',
                thirdIndustry:''
            },  
            rules: {
                userType:[
                    {required: true, message: '请选择账户类型', trigger: 'change'  }
                ],
                mobile: [
                    { required: true, message: '请输入电话', trigger: 'blur' }
                ],
                code:[
                    {required: true, message: '请输入验证码', trigger: 'change'  }
                ],
                password:[
                    {required: true, message: '请输入密码', trigger: 'change'  }
                ],
                confirmPassword:[
                    {required: true, message: '请输入确认密码', trigger: 'change'  }
                ],
                companyName:[
                    {required: true, message: '请输入公司名称', trigger: 'change'  }
                ],
                // firstIndustry:[
                //     {required: true, message: '请选择所属行业', trigger: 'change'  }
                // ],
                regdate:[
                    {required: true, message: '请输入注册成立日期', trigger: 'change'  }
                ],
                regDistrictCode:[
                    {required: true, message: '请选择注册所在地', trigger: 'change'  }
                ],
                contactTrueName:[
                    {required: true, message: '请输入联系人姓名', trigger: 'change'  }
                ],
                contactPosition:[
                    {required: true, message: '请输入联系人职位', trigger: 'change'  }
                ],
                contactPhone:[
                    {required: true, message: '请输入联系电话', trigger: 'change'  }
                ],
                contactEmail:[
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱', trigger: ['blur', 'change'] }
                ],
            },
            industryArr:[],
            secondArr:[],
            thirdArr:[],
            addressArr:[],
            cityArr:[],
            districtArr:[],
            chectTrue:false
        }
    },
    components: {

    },  
    watch:{

    },
    created() {
        let arr = location.hostname.split('.');
        let urlName = arr[0] == 'www'?arr[1]:arr[0];
        this.configObj = config.urlObjs[urlName];
        this.companyName = this.configObj.name
    },
    mounted(){
        this.getIndustry()
         this.getProvince()
         this.getDateStr()
    },
    computed: {
        xcompanyName() {
            return this.information1.companyName;
        }
    },
    watch: {
        xcompanyName(cur_val, old_val) {
            this.noResult = false;
        }
    },
    methods:{
        getChannelName(){
            let url = CONSTANT.URL.WEB.FINDCHANNELBASEID,
                data = {},
                dataForm = {}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.companyName = res.data.bussData.companyName
                } else {
                    
                }
            })
        },
        codeChange(e){
            this.noCode = false
        },
        companyChange(e){
            this.noResult = false
        },
        getDateStr(){
            var d = new Date();
            d.getFullYear()
            d.getMonth() 
            this.dateStr =  d.getFullYear()+'-'+(d.getMonth()+1)+'-' +d.getDate()
        },
        nextCert(){
            this.$router.replace('/certificationList')
        },              
        firstChange(e){
            this.information1.secondIndustry = ''
            this.information1.thirdArr = ''
            this.industryArr.map((item)=>{
                if(e == item.key){
                    this.secondArr = item.childs
                }
            })
        },
        secondChange(e){
            this.information1.thirdArr = ''
            this.secondArr.map((item)=>{
                if(e == item.key){
                    this.thirdArr = item.childs
                }
            })
        },
        provinceChange(e){
            this.information1.regCityCode = '';
            this.information1.regDistrictCode = '';
            this.addressArr.map((item)=>{
                if(e == item.key){
                    this.cityArr = item.childs
                }
            })
        },
        cityChange(e){
            this.information1.regDistrictCode = '';
            this.cityArr.map((item)=>{
                if(e == item.key){
                    this.districtArr = item.childs
                }
            })
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(!valid) {
                        return;
                    }
                    let  url = CONSTANT.URL.WEB.CHECKCODE,
                        data = {bizType:'register',code:this.information.code,mobile:this.information.mobile},
                        dataForm = {}
                        common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                            if(res.status == 200){
                                if(this.information.password != this.information.confirmPassword){
                                    this.$message.error('重复密码与密码不一致！');
                                    return;
                                }
                                 this.active = 1
                            }else{
                                this.noCode = true
                            }
                        }) 
                
                } else {
                    return false;
                }
            });
        },
        next2(formName) {
            this.$refs[formName].validate((valid) => {
                let  url = CONSTANT.URL.ADMIN.CHECK,
                data = {},
                dataForm = { companyName:this.information1.companyName}
                if(!valid) {
                    return;
                }
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                    if(res.status == 200){
                        this.chectTrue = true;
                        this.noResult = false;
                        if (valid) {
                            if(!this.chectTrue){
                                this.noResult = true
                                return;
                            }
                            this.active = 2
                        } else {
                            return false;
                        }
                    }else{
                        this.noResult = true
                    }
                }) 

            });
        },
        next3(){
            if(!this.checked){
                this.$message.error('请勾选上述保密协议！');
                return;
            }
            let  url = CONSTANT.URL.WEB.REGISTER,
                data = Object.assign(this.information,this.information1),
                dataForm = { }
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    common.setCookie('sessionId',res.data.bussData.sessionId)
                    common.setCookie('nickname',res.data.bussData.nickname)
                    common.setCookie('userType',res.data.bussData.userType)
                    if(res.data.bussData.userType == 'company'){
                        this.active = 3
                    }else{
                        this.$message({
                            message: '已注册完成',
                            type: 'success'
                        });
                        if(res.data.bussData.userType == 'channel'){
                             this.$router.replace('companyChannelDetail')
                        }else if(res.data.bussData.userType == 'bank'){
                             this.$router.replace('companyBankDetail')
                        }
                       
                    }
                    
                }else{
                    this.$message.error(res.msg);
                }
            })
        },
        getCode(){
            if (!this.information.mobile) {
                this.$message.error('手机号不能为空');
                return;
            }
            if (!(/^1[34578]\d{9}$/.test(this.information.mobile))) {
                this.$message.error('手机号格式不对');
                return;
            }
            if (this.codeMsg != '获取短信验证码') {
                return;
            }
            this.getCodeNum();
        },
        getCodeNum(){
            let  url = CONSTANT.URL.WEB.FINDMOBILECODE,
                data = {mobile:this.information.mobile,bizType:'register'},
                dataForm = {}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.information.code = res.data.bussData.code
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    });
                    
                     this.setNum()
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
        setNum(){
             var i = window.setInterval(()=>{
                 console.log()
                 if (this.seconds <= 0) {
                        clearInterval(i)
                        this.codeMsg = '获取短信验证码';
                        this.seconds = 60
                        return;
                    }else{
                        this.seconds = this.seconds --;
                        this.codeMsg =this.seconds -- + 's'
                    }
             },1000)
        },
        checkCommpany(formName){
            
            if(this.information1.companyName == '' || this.information1.companyName == undefined) {
                // this.$refs[formName].validate();
                return;
            }
            let  url = CONSTANT.URL.ADMIN.CHECK,
                data = {},
                dataForm = { companyName:this.information1.companyName}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                    if(res.status == 200){
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        });
                        this.check = true;
                        this.chectTrue = true;
                        this.noResult = false;
                    }else{
                        this.check = true;
                        this.noResult = true
                    }
                }) 
        },
        getIndustry(){
            let  url = CONSTANT.URL.BASE.DICTIONARY,
                data = {},
                dataForm = {codeType:'first_industry'}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.industryArr= res.data.bussData
                }else{
                
                }
            })
            
        },
        replace(link){
            this.$router.push(link)
        },
        getProvince(){
            let  url = CONSTANT.URL.BASE.DICTIONARY,
                data = {},
                dataForm = {codeType:'province'}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.addressArr= res.data.bussData
                    localStorage.setItem("address",JSON.stringify( res.data.bussData));
                }else{
                
                }
            })
        }
        
    }
}
</script>
<!--<style scoped src="../../../static/common.css" />-->
<style lang="scss">
    .register-wrap{
        min-height: 100%;
        background-color: #F5F5F5;
        .el-icon-arrow-up:before{
            top: 22px
        }
        .regist-content{
            float: inherit;
        }
        .head{
            position: relative;
            height: 138px;
            line-height: 138px;
            background-color: #F5F5F5;
            width: 100%;
            overflow: hidden;
            .logo{
                cursor:pointer;
                position: absolute;
                top: 31px;
                left: 18.7%;
                width: 313px;
                height: 76px;
                color: #fff;
                background-size: 100%;
            }
        }
        .el-form-item__content{
            margin-left: 0!important;
        }
        .el-form-item__error {
            color: #f56c6c;
            font-size: 14px;
            line-height: 1;
            padding-top: 4px;
            position: absolute;
            top: 74%;
            left: 23%;
        }
        .el-form-item__content {
            line-height: initial;
        }
        .el-form-item{
            margin-bottom: 0;
        }
        .step-wrap {
            .el-steps--horizontal {
                width: 41.67%;
                min-width: 800px;

                @media screen and (max-width:1366px) {
                    width: 60%;
                    font-size: 16px;
                }
                @media screen and (max-width: 1600px) {
                    width: 50%;
                    font-size: 22px;
                }
            }
            .el-steps {
                .el-step:nth-child(1) {
                    .el-step__main {
                        margin-left: 70px;
                    }
                }
                .el-step:nth-last-child(1) {
                    .el-step__main {
                        margin-left: -40px;
                    }
                }
            }
        }
        /*
        .step-wrap{
            height: 155px;
            background-color: #fff;
            .el-steps {
                .el-step:nth-child(1) {
                    .el-step__main {
                        margin-left: 70px;
                    }
                }
                .el-step:nth-last-child(1) {
                    .el-step__main {
                        margin-left: -40px;
                    }
                }
            }
            .el-steps--horizontal{
                width: 41.67%;
                font-size: 22px;
                min-width: 800px;

                @media screen and (max-width:1366px) {
                    width: 60%;
                    font-size: 16px;
                }
                @media screen and (max-width: 1600px) {
                    width: 50%;
                    font-size: 22px;
                }
                margin: 0px auto 0;
                padding-top: 60px;
                .is-success{
                    .el-step__icon.is-text{
                        color: #E1E1E1;
                        background-color: #ED7018;
                        border: 1px solid #ED7018;
                        .el-step__icon-inner{
                            color: #fff;
                        }
                    }
                }
                .el-step__head.is-success{
                    .el-step__line{
                        background-color: #ED7018;
                        border: 0px solid #ED7018;
                    }
                }
                .el-step__title {
                    color: black;
                    font-weight: bold;
                }
                .el-step__title.is-process{
                    color: #ED7018;
                    font-weight: bold;
                }
                .el-step__title.is-wait{
                    color: #999;
                }
                .is-process{
                   .el-step__icon.is-text{
                        color: #E1E1E1;
                        background-color: #ED7018;
                        border: 1px solid #ED7018;
                        .el-step__icon-inner{
                            color: #fff;
                        }
                    } 
                }
                .el-step__icon.is-text{
                    color: #E1E1E1;
                    background-color: #E1E1E1;
                    border: 1px solid #E1E1E1;
                    .el-step__icon-inner{
                        color: #fff;
                    }
                }
            }
        }
        /**/
        .regist-content{
            /* width: 41.67%; */
            /* width: 800px; */
            width: 41.67%;
            min-width: 800px;
            @media screen and (max-width:1000px) {
                width: 60%;
            }
            margin: 0 auto;
            padding-left: 0%;
            padding-top: 40px;
            padding-bottom: 50px;
            .next-btn{
                width: 50%;
                margin-left: 23.2%;
                margin-bottom: 20px;
                height: 54px;
                line-height: 54px;
                text-align: center;
                font-size: 18px;    font-size: 18px;
                color: #fff;
                background-color: #ED7018;
                cursor: pointer;
                &.next1{
                    margin-top: 15px;
                }
                &:hover{
                    background-color: #ED9000;
                    transition:all .2s linear;
                }
            }
            .content-list{
                position: relative;                
                overflow: hidden;
                margin-bottom: 20px;
                .el-date-editor{
                    input{
                        font-size: 14px;
                    }
                }
                .el-input{
                        input{
                            font-size: 14px!important;
                        }
                    }
                .el-select{
                    .el-input{
                        input{
                            font-size: 14px!important;
                        }
                    }
                    }
                &.type{
                     .el-select{
                        float: left;
                        width: 50%;
                        .el-input{
                            width: 100%;
                            input{
                                width: 100%;
                            }
                        }
                     }
                }
                &.line{
                    .el-select{
                        width: 23.75%;
                         margin-right: 1.8%;
                        .el-input{
                            width: 100%;
                            input{
                                width: 100%;
                                height: 54px;
                                border: 1px solid #E1E1E1;
                                font-size: 18px;
                                color: #333
                            }
                        }
                    }
                }
                &.address{
                    .el-select{
                        width: 15%;
                         margin-right: 1.8%;
                        .el-input{
                            width: 100%;
                            input{
                                width: 100%;
                                height: 54px;
                                border: 1px solid #E1E1E1;
                                font-size: 18px;
                                color: #333
                            }
                        }
                    }
                }
                
                .send-btn{
                        position: absolute;
                        right: 0;
                        width: 169px;
                        height: 54px;
                        line-height: 54px;
                        text-align: center;
                        font-size: 18px;
                        color: #fff;
                        background-color: #ED7018;
                        cursor: pointer;
                        &:hover{
                            background-color: #ED9000;
                            transition:all .2s linear;
                        }
                    }
                .name{
                    float: left;
                    height: 54px;
                    line-height: 54px;
                    font-size: 18px;
                    color: #111;
                    width: 20.75%;
                    text-align: right;
                    margin-right: 2.375%;
                }
                .el-input{
                    float: left;
                    width: 50%;
                }
                .el-input__inner{
                    border: 1px solid #e1e1e1;
                    height: 54px;
                    font-size: 18px;
                    border-radius: 2px;
                    -webkit-border-radius: 2px;
                }
            }
            .tip-wrap{
                text-align: center;
                font-size: 18px;
                color: #666;
                padding-top: 120px;
                margin-bottom: 94px;
            }
            .text-wrap{
                width: 84.375%;
                height: 439px;
                background-color: #fff;
                overflow: auto;
                margin: 0 auto;
                border: 1px solid #E1E1E1;
                margin-bottom: 33px;
                padding: 10px 5%;
                font-size: 14px;
                .title{
                    text-align: center;
                }
                .text{
                    line-height: 30px;
                }
                .desc{
                    text-indent: 20px;
                    line-height: 30px;
                }
                .date{
                    text-align: right;
                    padding-left: 89px;
                    input{
                        width: 27.5%;
                        border: 0px;
                        padding: 0 10px;
                        &:focus{
                            outline: 0;
                        }
                    }
                }
                .company{
                    input{
                        border: 0px;
                        padding: 0 10px;
                        border-bottom: 1px solid #000;
                        &:focus{
                            outline: 0;
                        }
                    }
                }
            }
            .text-read{
                color: #111;
                font-size: 16px;
                overflow: hidden;
                margin-bottom: 39px;
                .el-checkbox{
                    color: #111;
                    font-size: 16px;
                    float: left;
                    margin-left: 12.5%;
                }
                .print{
                    float: left;
                    margin-left: 19.875%;
                }
            }
        }
    }
</style>
